<template>
    <div v-show="dialog.isOpen">
        <div class="modal show">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button @click="doClose" type="button" class="close">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">{{dialog.isAdd?"新增用户":"修改用户"}}</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <input class="form-control" v-model="user.name" type="text" placeholder="请输入姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-9">
                                    <input class="form-control" v-model="user.userName" type="text" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">年龄：</label>
                                <div class="col-sm-9">
                                    <input class="form-control" v-model="user.age" type="text" placeholder="请输入年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">性别：</label>
                                <div class="col-sm-9">
                                    <label class="radio-inline">
                                        <input type="radio" v-model="user.gender" name="gender" value="男"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" v-model="user.gender" name="gender" value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">电话：</label>
                                <div class="col-sm-9">
                                    <input class="form-control" v-model="user.mobile" type="text" placeholder="请输入电话">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">爱好：</label>
                                <div class="col-sm-9">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" v-model="user.hobbies" value="打球"> 打球
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" v-model="user.hobbies" value="爬山"> 爬山
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" v-model="user.hobbies" value="郊游"> 郊游
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">学历：</label>
                                <div class="col-sm-9">
                                    <select v-model="user.edu" class="form-control">
                                        <option value="0">请选择</option>
                                        <option value="高中">高中</option>
                                        <option value="大专">大专</option>
                                        <option value="本科">本科</option>
                                        <option value="研究生">研究生</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" @click="doClose" class="btn btn-default">关闭</button>
                        <button type="button" @click="saveUser" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade in"></div>
    </div>
</template>

<script>
export default {
    props: ["dialog", "userData"],
    data() {
        return {
            user: {}
        }
    },
    beforeUpdate() {
        this.user = this.userData
    },
    methods: {
        doClose() {
            this.$emit("dialog", {
                isOpen: false,
                isAdd: true
            })
        },
        saveUser() {
            this.$emit('saveClk', Object.assign({}, this.user))
        }
    }
}
</script>

<style>
.modal-body {
    padding: 15px 70px;
}
</style>
